<template>
  <div class="app-container">
    <!-- 筛选栏 -->
    <div v-show="showSearch">
      <!-- 搜索表单 -->
      <el-form :inline="true" ref="queryForm" size="small">
        <el-form-item label="学员姓名">
          <el-input
            v-model="queryParams.studentName"
            placeholder="请输入学员姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-select
            v-model="queryParams.courseVideoId"
            placeholder="默认全部"
            clearable
          >
            <el-option
              v-for="item in courseList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职级">
          <el-select
            v-model="queryParams.gradeId"
            clearable
            placeholder="默认全部"
          >
            <el-option
              v-for="item in gradeList"
              :key="item.id"
              :label="item.grade"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 信息列表 -->
    <div style="float: left; width: 100%">
      <el-table
        border
        v-loading="listLoading"
        :header-cell-style="{ background: '#FAFAFA' }"
        :data="certificateList"
        @selection-change="handleSelectionChange"
        style="width: 100%"
        height="75vh"
      >
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="studentName" label="学员姓名"> </el-table-column>
        <el-table-column prop="idCard" label="学员身份证号"> </el-table-column>
        <el-table-column prop="courseName" label="课程名称"> </el-table-column>
        <el-table-column prop="grade" label="课程等级"> </el-table-column>
        <!-- 图片 -->
        <el-table-column label="证书图片" prop="eduCertificateInfo.cover">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 50px"
              :src="scope.row.eduCertificateInfo.cover"
              :preview-src-list="[scope.row.eduCertificateInfo.cover]"
            ></el-image>
          </template>
        </el-table-column>

        <el-table-column
          label="录入日期"
          prop="date"
          :show-overflow-tooltip="true"
          sortable
        >
        </el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="preEdit(scope.row)">
              编辑
            </el-button>
            <el-button
              type="text"
              size="medium"
              @click="deleteOne(scope.row.projectId)"
            >
              删除
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div style="width: 100%; text-align: center; margin-top: 10px">
        <el-pagination
          @size-change="sizeChange"
          @current-change="goto"
          :current-page="page.current"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          background
          style="float: right"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 编辑对话框 -->
    <!-- <el-dialog
      title="编辑信息"
      :visible.sync="modifyDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="uploadForm" :model="modifyForm" label-width="100px">
        <el-row>
          <el-form-item label="职业名称" prop="title">
            <el-input
              v-model="modifyForm.profession"
              placeholder="请输入职业名称"
              maxlength="30"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="工种名称" prop="type">
            <el-input v-model="modifyForm.type" placeholder="请输入工种名称" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="评价等级" prop="level">
            <el-input v-model="modifyForm.level" placeholder="请输入评价等级" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="学员姓名" prop="name">
            <el-input v-model="modifyForm.name" placeholder="请输入学员姓名" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="学员身份证号" prop="name">
            <el-input
              v-model="modifyForm.idCard"
              placeholder="请输入学员身份证号"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="评价结果" prop="result">
            <el-input
              v-model="modifyForm.result"
              placeholder="请输入评价结果"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="证书" prop="certificateId">
            <el-select
              v-model="modifyForm.certificateId"
              placeholder="请选择证书"
            >
              <el-option
                v-for="item in certificateCategoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="证书编号" prop="certificateId">
            <el-input
              v-model="modifyForm.certificateId"
              placeholder="请输入证书编号"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="发证机构" prop="institute">
            <el-input
              v-model="modifyForm.institute"
              placeholder="请输入发证机构"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="发证日期" prop="date">
            <el-date-picker
              v-model="modifyForm.date"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateStudyRecord()">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import { getCertificatePage } from "@/api/certificate";
import { getCategory } from "@/api/classification";
import { mapGetters } from "vuex";
import { getAllCourse } from "@/api/edu/course";
import { getGradeList } from "@/api/grade";
export default {
  name: "certificate",
  computed: {
    ...mapGetters(["companyId"]),
  },
  data: function () {
    return {
      //表格加载遮罩
      listLoading: "false",
      //级联分类列表
      typeOptions: [],
      //职级列表
      gradeList: [],
      //证书列表
      certificateCategoryList: [],
      //课程列表
      courseList: [],
      //搜索表单
      queryParams: {
        studentName: "",
        gradeId: "",
        courseId: "",
      },
      //分页设置
      page: {
        current: 1,
        total: 0,
        size: 10,
      },
      //批量删除列表
      selectList: [],
      //证书列表
      certificateList: [],
      //上传对话框
      uploadDialog: false,
      //上传表单
      uploadForm: {},
      //修改对话框
      modifyDialog: false,
      //修改表单
      modifyForm: {},
      //是否显示搜索表单
      showSearch: true,
    };
  },
  created: function () {
    this.getList();
    //查询所有课程列表
    getAllCourse(this.companyId).then((res) => {
      const data = res.data;
      this.courseList = data.list;
    });
    //查询所有职级列表
    getGradeList().then((res) => {
      const data = res.data;
      this.gradeList = data.resList;
    });
  },
  methods: {
    //获取记录列表
    getList: function () {
      this.listLoading = true;
      let that = this;
      if (this.queryParams.courseId.length > 0) {
        this.queryParams.courseId =
          this.queryParams.courseId[this.queryParams.courseId.length - 1]; //小类id
      }
      //表格数据列表
      getCertificatePage(
        this.queryParams,
        this.page.current,
        this.page.size,
        this.companyId
      ).then((res) => {
        const data = res.data;
        that.page.total = data.total;
        that.certificateList = data.resList;
        this.listLoading = false;
      });
      //分类列表
      getCategory(0, this.companyId).then((res) => {
        const data = res.data;
        this.typeOptions = this.deleteChildren(data.resList);
      });
    },
    //删除类别中的空childrenList[]
    deleteChildren(arr) {
      let childs = arr;
      for (let i = childs.length; i--; i > 0) {
        if (childs[i].childrenList) {
          if (childs[i].childrenList.length) {
            this.deleteChildren(childs[i].childrenList);
          } else {
            delete childs[i].childrenList;
          }
        }
      }
      return arr;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        studentName: "",
        courseId: "",
        gradeId: "",
      };
      this.getList();
    },
    //点击新增预处理
    preAdd() {
      this.uploadForm = {
        studentId: "",
        videoId: "",
        complete: "0",
        costTime: "",
        progress: "",
      };
      //重置表单
      if (this.$refs["uploadForm"] !== undefined) {
        this.$refs["uploadForm"].resetFields();
      }
      this.uploadDialog = true;
    },
    //删除单个
    deleteOne: function (row) {
      var self = this;
      this.$confirm("此操作将删除该证书, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var idArray = []; //删除列表
          idArray.push(row.id);
          self.deleteAjax(idArray);
        })
        .catch(() => {});
    },
    //删除多个
    deleteList: function () {
      if (this.selectList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      var self = this;
      this.$confirm("此操作将删除选中的所有证书, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var idArray = [];
          self.selectList.forEach(function (item, index) {
            idArray.push(item.id);
          });
          self.deleteAjax(idArray);
        })
        .catch(() => {});
    },
    //删除Ajax请求
    deleteAjax: function (idArray) {
      var that = this;
      removeRecord(idArray[0]).then((res) => {
        if (res.success == true) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          that.getList();
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      });
    },
    //编辑预处理
    preEdit(row) {
      this.modifyForm = row;
      this.modifyDialog = true;
    },
    //提交编辑
    submitEdit() {
      //   updateRecord(this.modifyForm).then((res) => {
      //     if (res.success == true) {
      //       this.$message({
      //         message: "成功",
      //         type: "success",
      //       });
      //       this.getList();
      //       this.modifyDialog = false;
      //     } else {
      //       this.$message({
      //         message: "失败",
      //         type: "error",
      //       });
      //     }
      //   });
    },
    //选择删除的id列表
    handleSelectionChange: function (val) {
      this.selectList = val;
    },
    //关闭对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //跳转页面
    goto: function (current) {
      this.page.current = current;
      this.getList();
    },
    //页码改变
    sizeChange: function (size) {
      this.page.size = size;
      this.getList();
    },
  },
};
</script>

<style scoped>
</style>
